<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../includes/common.jsp" %>

<jsp:include page="history.view-toolbar.jsp"></jsp:include>

<div id="listForm">
<p>Đề: <b><a href="${scriptPath}?action=test.view&tv_id=${test.id}">${test.name}</a></b></p>
<p>Mã đề: <b><a href="${scriptPath}?action=testversion.view&testid=${test.id}&verid=${version.id}"> 
        ${empty version.code ? '&lt;không tên&gt;' : version.code}</a></b></p>
<p>Mô tả: <b>${test.description}</b></p>
<p>Thời gian cho phép: <b>${test.time} phút</b></p>
<p>Thời gian làm: <b>${u:floor(history.time/60)} phút 
	<c:if test="${history.time%60 != 0}">${history.time%60} giây</c:if></b> 
</p>
<p>Điểm: <b>${u:round(history.mark * 100)}%</b></p>
<p>Ngày làm: <b>${u:formatDateTime(history.takenDate)}</b></p>

<c:set var="type" value="${test.type=='radio' ? 'radio' : 'checkbox'}"></c:set>
<c:set var="i" value="0"></c:set>
<c:forEach items="${test.sections}" var="section">
   ${section.text}
   <c:set var="questionIds" value="${version.data.questionsOrder[section.id]}"></c:set>
   
   <c:forEach items="${questionIds}" var="questionId">
        
        <c:set var="question" value="${section.questionById[questionId]}"></c:set>
		<div class="question-wrapper">
			<div class="question-number-wrapper">
			     <b><a href="?action=question.view&qv_id=${question.id}">Câu ${i+1}</a></b>
			</div>
			<div class="question-content-wrapper">${question.content}</div>
			
			<div class="answer-list-wrapper">
			<c:set var="j" value="0"></c:set>
            <c:set var="answerIds" value="${version.data.answersOrder[section.id][questionId]}"></c:set>
            <c:forEach items="${answerIds}" var="answerId">
                <c:set var="answer" value="${question.answerById[answerId]}"></c:set>
				<!-- kiểm tra câu trả lời có được chọn hay không -->
				<c:set var="choosed" value="false"></c:set>
				<c:forEach items="${history.choices[question.id]}" var="anId">
					<c:if test="${anId == answer.id}">
						<c:set var="choosed" value="true"></c:set>
					</c:if>
				</c:forEach>
				
				<div class="answer-wrapper">
				    <div class="check-wrapper">
						<input type="${type}" ${choosed ? 'checked="checked"' : ''} 
							disabled="disabled" q${question.id}"></input>
				    </div>
					<c:if test="${choosed}">
					    <div class="marker-wrapper">
						<c:choose>
							<c:when test="${answer.correct}">
								<img src="${templatePath}/images/right.png" alt="right answer" width="16px" height="16px" />
							</c:when>
							<c:when test="${!answer.correct}">
								<img src="${templatePath}/images/wrong.png" alt="wrong answer" width="16px" height="16px" />
							</c:when>
						</c:choose>
						</div>
					</c:if>
                    <div class="answer-number-wrapper">
                       <b>${u:alpha(j)}</b>.
                    </div>
					<div ${answer.correct ? 'style="color:red"' : ''}>
					   ${answer.content}
					</div>
				</div>
				<c:set var="j" value="${j+1}"></c:set>	
			</c:forEach>
			</div>
		</div>
		<c:set var="i" value="${i+1}"></c:set>
    </c:forEach>
</c:forEach>
</div>

<jsp:include page="history.view-toolbar.jsp"></jsp:include>
